<template>
  <div class="detail">
    合同产值-明细:
    <hr />
    <div class="box">
      <table class="produceTable" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>完成情况</th>
            <th>填报日期</th>
            <th>合同名称</th>
            <th>计划完成日期</th>
            <th>本期完成产值（元）</th>
            <th>累计完成产值（元）</th>
            <th>本期完成产值(%)</th>
            <th>本期累计完成产值(%)</th>
            <th>税额</th>
            <th>不含税金额</th>
            <th>可抵扣税额</th>
            <th>销售代理佣金</th>
            <th>高新收入</th>
            <th>计划完成内容</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="contractDetails.length == 0">
            <td :colspan="16" class="operate">暂无数据</td>
          </tr>
          <tr v-for="(item, index) in contractDetails" :key="index">
            <td>{{ item?.completionStatus == 'Y' ? '已完成' : '进行中' }}</td>
            <td>{{ item?.fillingDate }}</td>
            <td>{{ item?.contractName }}</td>
            <td>{{ item?.planCompletionDate }}</td>
            <td>{{ item?.completeCompletedPeriod }}</td>
            <td>{{ item?.accumulateCompletedPeriod }}</td>
            <td>{{ item?.completeCompletedRate }}</td>
            <td>{{ item?.accumulatedCompletedRate }}</td>
            <td>{{ item?.taxAmount }}</td>
            <td>{{ item?.excludingTaxAmount }}</td>
            <td>{{ item?.deductibleTaxAmount }}</td>
            <td>{{ item?.salesAgentCommission }}</td>
            <td>{{ item?.highTechIncome }}</td>
            <td>{{ item?.plannCompletionContent }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    分包计量-明细:
    <hr />
    <div class="box"  v-for="(subpackageDetails, index) in subpackageDetailsDivide" :key="index">
      <table class="countTable" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>完成情况</th>
            <th>填报日期</th>
            <th>合同名称</th>
            <th>计划完成日期</th>
            <th>本期含税金额（元）</th>
            <th>本期含税金额（外币）</th>
            <th>累计含税金额（元）</th>
            <th>累计含税金额（外币）</th>
            <th>本期完成产值(%)</th>
            <th>本期累计完成产值(%)</th>
            <th>税额</th>
            <th>税额（外币）</th>
            <th>不含税金额</th>
            <th>不含税金额(外币)</th>
            <th>可抵扣税额</th>
            <th>计划完成内容</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="subpackageDetails.length == 0">
            <td :colspan="16" class="operate">暂无数据</td>
          </tr>
          <tr v-for="(item, index) in subpackageDetails" :key="index">
            <td>{{ item?.completionStatus == 'Y' ? '已完成' : '进行中' }}</td>
            <td>{{ item?.fillingDate }}</td>
            <td>{{ item?.contractName }}</td>
            <td>{{ item?.planCompletionDate }}</td>
            <td>{{ item?.inclusiveAmount }}</td>
            <td>{{ item?.inclusiveForeignAmount }}</td>
            <td>{{ item?.disbursedInclusiveAmount }}</td>
            <td>{{ item?.disbursedInclusiveForeignAmount }}</td>
            <td>{{ item?.completeCompletedRate }}</td>
            <td>{{ item?.accumulatedCompletedRate }}</td>
            <td>{{ item?.taxAmount }}</td>
            <td>{{ item?.taxForeignAmount }}</td>
            <td>{{ item?.excludingTaxAmount }}</td>
            <td>{{ item?.excludingTaxForeignAmount }}</td>
            <td>{{ item?.deductibleTaxAmount }}</td>
            <td>{{ item?.plannCompletionContent }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    经费执行情况:
    <hr />
    <budget2></budget2>
  </div>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import budget from './budget.vue'
import budget2 from './budget2.vue'
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  components: {
    budget,
    budget2,
  },
  setup() {
    const store = useStore()
    // 经费详情表单
    const fundingDetails = reactive(store.state.projectCenter.fundingDetails)
    const contractDetails = fundingDetails.scheduleContractDetails
    const subpackageDetails = fundingDetails.scheduleSubpackageDetails
    // interface workLinkType {
    //   [index: number]: Array<any>
    // }

    let subpackageDetailsDivide = [[]] as any
    let tag = 0
    if(subpackageDetails?.length >1){
      subpackageDetails.sort(function (a, b) {
        let nameA = a.contractNumber.toUpperCase(); // 转换为大写以忽略大小写
        let nameB = b.contractNumber.toUpperCase();
        console.log(nameA,nameB,nameA-nameB);
        return nameA < nameB ? -1 : nameA > nameB ? 1 : 0; // 按字母顺序排序
      })
      console.log(subpackageDetails,'subpackageDetails');
      subpackageDetails.reduce(function (prev, cur, index, arr) {
        // console.log(subpackageDetailsDivide[tag],index,tag,'subpackageDetailsDivide[tag]');
        if(index==1){
          subpackageDetailsDivide[tag].push(prev)
        }
        if(prev.contractNumber == cur.contractNumber){
          subpackageDetailsDivide[tag].push(cur)
        }else{
          ++tag
          subpackageDetailsDivide.push([])
          subpackageDetailsDivide[tag].push(cur)
        }
        return cur;
      });
      console.log(subpackageDetailsDivide,'subpackageDetailsDivide');
    }
    console.log(contractDetails, subpackageDetails, '经费详情表单')
    return {
      fundingDetails,
      contractDetails,
      subpackageDetails,
      subpackageDetailsDivide
    }
  },
  beforeUnmount() {
    console.log('经费详情表单卸载了')
    for (let key in this.fundingDetails) {
      this.fundingDetails[key] = []
    }
  },
})
</script>

<style scoped lang="scss">
.detail {
  height: 65vh;
  overflow: scroll;
}
th {
  padding: 0 10px;
}
.box {
  // width: 240%;
  width: 2800px;
  overflow: auto;
  margin-bottom: 10px;
  .countTable,.produceTable{
    // width: 300%;
    line-height: 24px;
    th:nth-child(3) {
      width: 600px;
    }
    th:last-child {
      width: 550px;
    }
  }
  .title {
    text-align: center;
    line-height: 32px;
    background-color: #f0f2f5;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}
</style>
